<template>
  <div>
    <el-main>
      <div class="top_box">
        <div class="title">{{ titleName[this.type - 1] }}</div>
        <!-- <el-button type="primary" @click="changeT">{{ this.t == 0 ? '按记录显示' : '按用户显示' }}</el-button> -->

        <el-dropdown @command="changeT">
          <el-button type="primary">
            {{ this.t == 0 ? '按记录显示' : '按用户显示' }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">按记录显示</el-dropdown-item>
            <el-dropdown-item command="1">按用户显示</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="近一周" name="1"></el-tab-pane>
      </el-tabs>

      <el-table id="table" :header-cell-style="{ background: '#F3F8FE' }" :data="tableData" border style="width: 100%">
        <el-table-column prop="username" align="center" label="用户名">
        </el-table-column>
        <el-table-column prop="keyword" align="center" label="搜索内容" v-if="type == 2">
        </el-table-column>
        <el-table-column prop="title" align="center" label="消息名称" v-if="type == 3">
        </el-table-column>
        <el-table-column prop="pime" align="center" label="预警时间" v-if="type == 4">
        </el-table-column>
        <el-table-column prop="push_title" align="center" label="预警标题" v-if="type == 4">
        </el-table-column>
        <el-table-column prop="push_name" align="center" label="预警类型" v-if="type == 4">
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="时间">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"
          layout="total, prev, pager, next, jumper" :total="total" align='left'></el-pagination>
        <!-- parseInt(page.total/10) -->
      </div>
    </el-main>
  </div>
</template>

<script>
import { quantity_detail } from "@/api"
export default {
  components: {
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      tableData: [],
      activeName: '0',
      type: 1,
      p: 0,
      t: 0,
      total: 0,
      titleName: ['登录记录', '搜索记录', '消息记录', '监控记录']
    }
  },
  mounted() {
    try {
      if (this.$route.query.type) {
        this.type = this.$route.query.type
      }
      // console.log(this.$route.query.type, 'type');
      this.getListNews()
    } catch (e) {
      this.$message(err.message);
    }
  },
  methods: {
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.page = currentPage
        this.getListNews()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    getListNews() {
      try {
        const form = {
          type: this.type,
          p: this.p,
          t: this.t,
          limit: this.pageSize,
          page: this.page
        }
        quantity_detail(form).then(res => {
          // console.log(res, 'adsada');
          this.tableData = res.list
          this.total = res.count
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    handleClick(tab, event) {
      // console.log(tab.name);
      this.p = tab.name
      this.page = 1
      this.getListNews()
    },
    changeT(item) {
      // console.log('adsada', item);
      this.t = item
      this.page = 1
      this.getListNews()
    }
  }
}
</script>

<style scoped >
.top_box {
  display: flex;
  justify-content: space-between;
}

.title {
  font-size: 26px;
  font-weight: bold;
}

.pagination {
  margin: 15px 0;
}

.el-pagination {
  text-align: right;
}

.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 30px;
  margin-left: 0 !important;
}

.right {
  margin-right: 10px;
  height: 40px;
  line-height: 40px;
}

@media (max-width:1600px) {
  #table {
    width: 95% !important;
  }

}
</style>
